import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    TextInput
} from 'react-native';
import Config from '../common/Config'
import Utils from '../common/Utils'
import {Toast,ModalIndicator} from 'teaset';
import Picker from 'react-native-picker';
import area from '../json/area.json'
const {height, width} = Dimensions.get('window');
export default class EnquiriesTabPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name:'',
            IDCard:'',
            area:this.props.area,
            areaChange:this.props.area,
            isSelect:false,
        }
    };

    enquiries=()=>{
        if(this.state.name===''&&this.state.IDCard===''){
            Toast.message('姓名和身份证号不能为空')
        }else {
            let params={
                "name":this.state.name,
                "idCard":this.state.IDCard
            };
            ModalIndicator.show("正在请求数据......");
            fetch(Config.baseApi+'/lending/queryArrears',{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: Utils.getParamsString(params)
            })
                .then((response) => response.json())
                .then((responseJson) => {
                    ModalIndicator.hide();
                    if(responseJson.status!==1){
                        Actions.InquireResultPage({data:responseJson.data})
                    }else{
                        Toast.message(responseJson.msg);
                    }
                })
                .catch((error) => {
                    ModalIndicator.hide();
                    Toast.message(error);
                });
        }
    };

    _createAreaData=()=> {
        let data = [];
        let len = area.length;
        for(let i=0;i<len;i++){
            let city = [];
            for(let j=0,cityLen=area[i]['city'].length;j<cityLen;j++){
                let _city = {};
                _city[area[i]['city'][j]['name']] = area[i]['city'][j]['area'];
                city.push(_city);
            }

            let _data = {};
            _data[area[i]['name']] = city;
            data.push(_data);
        }
        return data;
    };

    area=()=>{
        let b=[];
        b=this.state.area[2];
        for(let i=0;i<b.length;i++){
            if(b[i]!=='市'){
                this.setState({
                    areaChange:this.state.area[1]
                })
            }else {
                this.setState({
                    areaChange:this.state.area[2]
                })
            }
        }
    };

    _showAreaPicker=()=>{
        Picker.init({
            pickerConfirmBtnText:'完成',
            pickerCancelBtnText:'取消',
            pickerTitleText:'',
            pickerToolBarBg:[255,255,255,255],
            pickerBg:[222,222,222,222],
            pickerData: this._createAreaData(),
            selectedValue: ['河北', '唐山', '古冶区'],
            onPickerConfirm: pickedValue => {
                this.setState({
                    area:[pickedValue[0]+'省',pickedValue[1]+'市',pickedValue[2]],
                    isSelect:false
                },()=>this.area());
            },
            onPickerCancel: (pickedValue, pickedIndex) => {
                this.setState({
                    isSelect:false
                })
            },
        });
        Picker.show();
        this.setState({
            isSelect:true
        })
    };

    render() {
        return (
            <View style={styles.container}>
                {this.state.isSelect
                    ?(<TouchableOpacity
                        onPress={()=>this.setState({
                            isSelect:false
                        },()=>Picker.hide())}
                        style={{position: 'absolute',top:0, bottom:0,left:0,right:0,
                            backgroundColor:'#000000',opacity:0.2,zIndex:2}}/>)
                    :(null)}
                <View style={styles.titleView}>
                    <TouchableOpacity
                        onPress={()=>this._showAreaPicker()}
                        style={styles.goBackView}>
                        <Text style={styles.areaNameMsg}>{this.state.areaChange}</Text>
                        <Image
                            source={ImageUtil.Elect}
                            style={styles.areaNameImg}/>
                    </TouchableOpacity>
                    <Text style={styles.titleMsg}>查询</Text>
                </View>
                <View style={styles.nameLabelView}>
                    <Text style={styles.nameMsg}>姓        名：</Text>
                    <View style={styles.nameTextInputView}>
                        <TextInput  ref={ (ref)=>this.topTextInput = ref }
                                    autoCapitalize={"none"}
                                    defaultValue={this.state.name}
                                    placeholder="请输入老赖的姓名"
                                    placeholderTextColor='#bababa'
                                    autoCorrect={false}
                                    style={styles.textInputView}
                                    onChangeText={(text)=>{
                                        this.setState({
                                            name:text,
                                        })
                                    }}/>
                    </View>
                </View>
                <View style={styles.IDCardView}>
                    <Text style={styles.IDCardMsg}>身份证号：</Text>
                    <View style={styles.nameTextInputView}>
                        <TextInput  ref={ (ref)=>this.bottomTextInput = ref }
                                    autoCapitalize={"none"}
                                    defaultValue={this.state.IDCard}
                                    placeholder="请输入老赖的身份证号"
                                    placeholderTextColor='#bababa'
                                    autoCorrect={false}
                                    style={styles.textInputView}
                                    onChangeText={(text)=>{
                                        this.setState({
                                            IDCard:text,
                                        })
                                    }}/>
                    </View>
                </View>
                <View style={styles.enquiriesView}>
                    <TouchableOpacity
                        onPress={()=>this.enquiries()}
                        style={styles.enquiriesButView}>
                        <Text style={styles.enquiriesButMsg}>查询</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.arrearsView}>
                    <TouchableOpacity
                        onPress={()=>this.upLoad()}
                        style={styles.arrearsButView}>
                        <Text style={styles.arrearsButMsg}>老赖上传</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
    upLoad=()=>{
        Actions.UploadPage()
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#ffffff'
    },
    titleView:{
        backgroundColor:'#000000',
        width:width,
        alignItems:'center',
        justifyContent:'center'
    },
    titleMsg:{
        textAlign:'center',
        fontSize:20,
        color:'#ffffff',
        marginTop:34,
        marginBottom:29/2
    },
    nameLabelView:{
        height:49,
        marginLeft:15,
        flexDirection:'row',
        alignItems:'center',
        marginTop:29
    },
    nameMsg:{
        textAlign:'center',
        fontSize:15,
        marginBottom:15,
        marginTop:20
    },
    IDCardView:{
        marginLeft:15,
        flexDirection:'row',
        alignItems:'center'
    },
    IDCardMsg:{
        textAlign:'center',
        fontSize:15,
        marginBottom:15,
        marginTop:41/2
    },
    nameTextInputView:{
        marginTop:4,
        marginLeft:10,
        borderBottomWidth:1,
        borderColor:'#cacaca',
        width:width-122,
        justifyContent:'center'
    },
    textInputView:{
        fontSize:15,
        width:width-122,
        height:44
    },
    enquiriesView:{
        marginTop:39,
        alignItems:'center',
        justifyContent:'center'
    },
    enquiriesButView:{
        width:width-30,
        backgroundColor:'#3090dd',
        borderRadius:5,
        alignItems:'center',
        justifyContent:'center',
        height:44
    },
    enquiriesButMsg:{
        fontSize:15,
        color:'#ffffff',
        textAlign:'center'
    },
    arrearsView:{
        marginTop:32,
        justifyContent:'center',
        alignItems:'center'
    },
    arrearsButView:{
        width:width-30,
        borderRadius:5,
        alignItems:'center',
        justifyContent:'center',
        height:44,
        borderColor:'#cacaca',
        borderWidth:1
    },
    arrearsButMsg:{
        fontSize:15,
        color:'#00001a',
        textAlign:'center'
    },
    goBackView:{
        position: 'absolute',
        top:71/2,left:15,
        justifyContent:'center',
        alignItems:'center',
        flexDirection:'row'
    },
    areaNameMsg:{
        fontSize:17,
        color:'#ffffff',
        textAlign:'center'
    },
    areaNameImg:{
        marginLeft:7,
        height:13,
        width:13
    }
});
